<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">订单管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/myorder'}">我的订单</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="success"
            icon="el-icon-edit"
            size="mini"
            :disabled="single"
            @click="handleUpdate"
          >修改</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            :disabled="multiple"
            @click="handleDelete"
          >删除</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
        </el-col>
      </el-row>
      <el-table
        :data="tableData"
        border
        empty-text="center"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" align="center"></el-table-column>
        <el-table-column prop="orderNum" label="订单编号"></el-table-column>
        <el-table-column prop="orderRemark" label="订单备注"></el-table-column>
        <el-table-column prop="orderStatus" label="订单状态"></el-table-column>
        <el-table-column prop="paymentTime" label="付款时间"></el-table-column>
        <el-table-column prop="paymentMethod" label="付款方式"></el-table-column>
        <el-table-column prop="paymentMoney" label="付款金额"></el-table-column>
        <el-table-column prop="paymentVoucher" label="付款凭证">
          <template slot-scope="scope">
            <!-- {{ scope.row.paymentVoucher}} -->
            <el-image
              style="width: 100px; height: 50px"
              :src="scope.row.paymentVoucher"
              fit="cover"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="details(scope)">
              查看详情
            </el-button>
            <el-button
              size="small"
              type="primary"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
            >修改</el-button>
            <el-button type="danger" size="small" @click="refund(scope.row)">申请退款</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <!-- <el-pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :page-sizes="[5, 10, 20, 30]"
      :limit.sync="queryParams.pageSize"
      @pagination="tableData">
      </el-pagination>-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page=" queryInfo.pageNum"
        :page-sizes="[1, 2, 3, 5]"
        :page-size=" queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
    <!-- 添加或修改订单型号对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <div class="textti">订单明细</div>

        <el-form-item label="付款时间" prop="paymentTime">
          <el-date-picker
            clearable
            size="small"
            style="width: 200px"
            v-model="form.order.paymentTime"
            type="date"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择创建时间"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="付款方式" prop="paymentName">
          <el-select v-model="form.order.paymentMethod" placeholder="请选择付款方式">
            <el-option
              v-for="item in Products"
              :key="item.id"
              :label="item.paymentName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="付款金额" prop="paymentMoney">
          <el-input v-model="form.order.paymentMoney" placeholder="请输入订单值" />
        </el-form-item>
        <el-form-item label="付款凭证" prop="paymentVoucher">
          <!-- v-model="form.order.paymentVoucher" -->
          <el-upload
            :action="uploadUrl"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            :data="this.tkones"
            :before-upload="beforeAvatarUpload"
            :on-success="handleSuccess"
            list-type="picture"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
          </el-upload>
        </el-form-item>
      <div class="textti">商品名细</div>
        <el-button type="primary" size="small" class="textbtn" @click="Addcommodys">添加商品</el-button>
      <el-table
       :data="orderDetailsList"
        border
        empty-text="center"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" align="center"></el-table-column>
        <el-table-column  prop="pId"    label="商品id" > </el-table-column>
        <el-table-column  prop="pName"   label="商品名称" > </el-table-column>
        <!-- <el-table-column  prop="pPhoto"    label="商品图片" > </el-table-column> -->
        <el-table-column  prop="mName"    label="商品规格" > </el-table-column>
        <el-table-column  prop="uUnit"   label="商品单位" > </el-table-column>
        <el-table-column  prop="pNum"   label="商品数量" > </el-table-column>
        <el-table-column   label="操作" >
          <template slot-scope="scope">
                <el-button type="success" size="small" @click="comdelete(scope.row)">删除</el-button>
          </template>
         
        </el-table-column>
      </el-table>
        <div class="textti">收货明细</div>
        <el-row :gutter="20">
          <el-col :span="15">

            <el-form-item label="收获地址">
              <el-select
                v-model="form.addressID"
                @change="pNameChange($event)"
                class="addrss"
                placeholder="请选择收获地址"
              >
                <el-option
                  v-for="item in addresst"
                  :key="item.id"
                  :label="item.shippingAddress +  '-' +  item.consigneeName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label-width="90" label="新增收获地址" prop="paymentMoney" size="small">
              <el-button type="primary" icon="el-icon-edit" @click="dressarr"></el-button>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- <el-form-item label="付款凭证" prop="paymentVoucher">
          <el-input v-model="form.paymentVoucher" placeholder="请输入订单值" />
        </el-form-item>-->

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

     <!-- 收货地址对话框 -->
    <el-dialog title="添加收获地址对话框" :visible.sync="addressdialogVisible" width="30%">
      <el-form label-width="60px">
        <el-form-item label="收货人">
          <el-input v-model="AdrrForm.consignee_name" placeholder="请输入详细信息地址" />
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="AdrrForm.consignee_phone" placeholder="请输入详细信息地址" />
        </el-form-item>
        <el-form-item label="是否默认">
          <!-- <el-input v-model="AdrrForm.default_address" placeholder="请输入详细信息地址" /> -->
          <el-radio v-model="AdrrForm.default_address" label="1">是</el-radio>
          <el-radio v-model="AdrrForm.default_address" label="2">否</el-radio>
        </el-form-item>
        <el-form-item label="省" prop="paymentMoney">
          <!-- <el-row :gutter="21">
          <el-col :span="7">-->
          <el-select v-model="provinces" @change="provinceChange($event)" placeholder="请选择省份">
            <el-option v-for="item in province" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <!-- </el-col>
        <el-col :span="7">-->
        <el-form-item label="市区">
          <el-select v-model="citys" @change="cityChange($event)" placeholder="请选择市区">
            <el-option v-for="item in city" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <!-- </el-col>
        <el-col :span="7">-->
        <el-form-item label="县级">
          <el-select v-model="districts" @change="districtchange($event)" placeholder="请选择县">
            <el-option v-for="item in district" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
          <!-- </el-col>
          </el-row>-->
        </el-form-item>
        <el-form-item label="详细信息">
          <el-input v-model="detailed" placeholder="请输入详细信息地址" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addressdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="Addressbtn">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 添加商品对话框 -->
    <el-dialog title="添加商品对话框" :visible.sync="commdialogVisible" width="40%">
      <el-form label-width="80px" :model="addcommForm">

            <el-form-item
              label="商品类别"
              v-for="(item, index) in form.orderDetails"
              :key="item.index"
              :prop="'pName.' + index + '.model'"
              :rules="{
                  required: true, message: 'model不能为空', trigger: 'blur'
                  }"
            >

              <el-select v-model="addcommForm.pName" @change="pNameChange($event)" placeholder="请选择商品类型">
                <el-option
                  v-for="item in pName"
                  :key="item.id"
                  :label="item.categoryName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>

            <el-form-item
              v-for="(item, index) in form.orderDetails"
              label="商品规格"
              :key="item.index"
              :prop="'mName.' + index + '.model'"
              :rules="{
                    required: true, message: 'model不能为空', trigger: 'blur'
                    }"
            >

              <el-select v-model="addcommForm.mName" @change="mNameChange($event)" placeholder="请选择商品规格">
                <el-option
                  v-for="item in mName "
                  :key="item.id"
                  :label="item.modelValue + '-'+ item.modelValue"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>

            <el-form-item
              v-for="(item, index) in form.orderDetails"
              label="商品列表"
              :key="item.index"
              :prop="'mName.' + index + '.model'"
              :rules="{
                    required: true, message: 'model不能为空', trigger: 'blur'
                    }"
            >
             <!-- <el-form-item label="商品列表"> -->
              <el-select v-model="addcommForm.pId" @change="pidChange($event)" placeholder="请选择商品">
                <el-option
                  v-for="item in pId"
                  :key="item.id"
                  :label="item.categoryName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
        <el-form-item
          v-for="(item, index) in form.orderDetails"
          label="单位"
          :key="item.index"
          :prop="'phones.' + index + '.model'"
          :rules="{
          required: true, message: 'model不能为空', trigger: 'blur'
          }"
        >
          <!-- <el-input v-model="item.uUnit" placeholder="请输入订单名称" /> -->
          <!-- <el-form-item label="单位"> -->
          <el-select v-model="addcommForm.uUnit" @change="addcommUuit($event)" placeholder="请选择单位名称">
            <el-option
              v-for="item in uUnit"
              :key="item.id"
              :label="item.unitName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item v-for="(item, index) in form.orderDetails" label="商品数量" :key="item.index">
        <!-- <el-form-item  label="商品数量" :key="item.index"> -->
          <el-input v-model="addcommForm.pNum" placeholder="请输入商品数量" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="commdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="Addcommbtn">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 申请退款对话框 -->
    <el-dialog title="申请退款对话框" :visible.sync="RefdialogVisible" width="30%">
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="退款理由:" prop="modelValue">
          <el-input placeholder="请输入退款理由" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="RefdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="RefdialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data  () {
    return {
      provinces: '',
      citys: '',
      districts: '',
      prove: '',
      cit: '',
      distr: '',
      detailed: '',
      tableData: [],
      province: [],
      city: [],
      district: [],
      orderDetailsList: [
        {
          pName: '',
          // 商品规格
          mName: '',
          // 商品单位
          uUnit: '',
          // 商品列表
          pId: '',
          pNum: ''
        }
      ],
      addcommList: [],
      addcommfform: {},
      // 商品类别
      compName: '',
      // 商品规格
      commName: '',
      // 商品单位
      comuUnit: '',
      // 商品
      comPid: '',
      // 商品列表
      addcommForm: {},
      // 选中数组
      ids: [],
      // 商品类别
      pName: '',
      // 商品规格
      mName: '',
      // 商品单位
      uUnit: '',
      // 商品列表
      pId: '',
      // 收获地址
      addresst: '',
      pPhoto: '',
      radio: '1',
      addressdialogVisible: false,
      commdialogVisible: false,
      // 弹出层标题
      title: '',
      // 总条数
      total: 0,
      queryInfo: {
        pageNum: 1,
        pageSize: 5
      },
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        paymentName: undefined,
        paymentVoucher: undefined,
        categoryId: undefined,
        categoryName: undefined,
        inputTime: undefined
      },
      arrss: '',
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 是否显示弹出层
      open: false,
      // 修改id
      editId: '',
      // 是否显示申请退款对话框
      RefdialogVisible: false,
      form: {
        order: {},
        orderDetails: [
          {
            pId: '',
            pName: '',
            pPhoto: '',
            mName: '',
            uUnit: '',
            pNum: '',
            inputTime: ''
          }
        ]
      },
      Addcommody: [],
      AdrrForm: {},
      // 表单校验
      rules: {},
      tokenform: {},
      // Property: [],
      Products: [],
      tkones: {
        token: '',
        file: ''
      },
      // uploadUrl: 'http://192.168.1.11:8080/api/common/upload',
      uploadUrl: 'http://106.54.252.29:8080/api/common/upload',
      uploadForm: {},
      fileList: []
    }
  },
  created () {
    this.getorderList()
  },
  methods: {
    async getorderList  () {
      this.tokenform = {
        token: window.sessionStorage.getItem('token')
      }
      var qs = require('qs')
      const res = await this.$axios.post(
        'api/myorder',
        qs.stringify(this.tokenform, { indices: false })
      )
      console.log(res)
      this.tableData = res.data.rows
      this.tableData.forEach(item => {
        if (item.orderStus === 1) {
          this.tableData[0].orderStus = '进行中'
        }
      })
      this.total = res.data.total
    },
    // 上传成功
    handleSuccess (res) {
      console.log(res)
      this.form.order.paymentVoucher = res.url
    },
    // 添加收货人地址 点击button
    async dressarr  () {
      // 地址 省市区
      const province = await this.$axios.get('/api/province_list', {
        params: { token: window.sessionStorage.getItem('token') }
      })
      if (province.status === 200) {
        this.province = province.data.data
      }
      this.addressdialogVisible = true
      console.log(5)
    },

    /** 新增按钮操作 */
    async handleAdd () {
      console.log(5)
      // 付款方式
      const res = await this.$axios.get('api/payment_method', {
        params: { token: window.sessionStorage.getItem('token') }
      })
      console.log(res.data.data)
      this.Products = res.data.data

      console.log(res)
      const merchant = await this.$axios.get('/api/merchant_shipping', {
        params: { token: window.sessionStorage.getItem('token') }
      })
      console.log(merchant)
      this.addresst = merchant.data.data
      // 地址
      this.reset()
      this.open = true
      this.title = ' 添加订单型号'
    },
    async Addcommodys () {
      // 商品类别
      const rescat = await this.$axios.get('/api/category_list', {
        params: { token: window.sessionStorage.getItem('token') }
      })
      console.log(rescat)
      this.pName = rescat.data.data
      // 商品单位
      const unitres = await this.$axios.get('/api/unit_list', {
        params: { token: window.sessionStorage.getItem('token') }
      })
      this.uUnit = unitres.data.data
      console.log(unitres)
      this.commdialogVisible = true
      // console.log()
    },
    // 点击确定添加商品订单弹出框
    Addcommbtn () {
      // this.orderDetailsList[0].pName = this.commName
      // this.orderDetailsList[0].pNum = this.addcommForm.pNum
      // this.orderDetailsList[0].mName = this.commName
      // this.orderDetailsList[0].pId = this.comPid
      // this.orderDetailsList[0].uUnit = this.addcommForm.uUnit
      this.addcommfform.pName = this.commName
      this.addcommfform.pNum = this.addcommForm.pNum
      this.addcommfform.mName = this.commName
      this.addcommfform.pId = this.comPid
      this.addcommfform.uUnit = this.addcommForm.uUnit
      // this.orderDetailsList(...this.addcommfform)
      this.orderDetailsList.push(this.addcommfform)
      console.log(this.orderDetailsList)
      console.log(5)
      this.commdialogVisible = false
    },
    comdelete (item) {
      console.log(item)
    },
    // 商品规格 CHange事件
    async mNameChange (e) {
      const pid = await this.$axios.get('/api/product_list', {
        params: { mid: e, token: window.sessionStorage.getItem('token') }
      })
      console.log(pid)
      this.pId = pid.data.data
      this.pId.forEach(item => {
        if (item.modeId === e) {
          this.commName = item.modelName
        }
      })
      console.log(this.commName)
      // console.log(pid.data.data, '1')
    },

    // 商品类别change事件
    async pNameChange (e) {
      // 获取商品规格数据
      const mNameres = await this.$axios.get('/api/model_list', {
        params: { token: window.sessionStorage.getItem('token'), cid: e }
      })
      console.log(mNameres)
      this.mName = mNameres.data.data
      console.log(e)
      this.mName.forEach(item => {
        if (item.categoryId === e) {
          this.compName = item.categoryName
        }
      })
      console.log(this.compName)
    },
    pidChange (e) {
      console.log(e)
      this.pId.forEach(item => {
        if (item.id === e) {
          // console.log(item)
          // this.form.orderDetails.pPhoto = item.url
          this.form.orderDetails[0].pPhoto = item.url
          this.comPid = item.categoryName
          // console.log(this.form.orderDetails.pPhoto)
        }
        // console.log(item.url)
      })
    },
    // 单位change事件
    addcommUuit (e) {
      console.log(this.uUnit)
      this.comuUnit = this.unitName
    },
    // 商品单位
    async provinceChange  (e) {
      // console.log(e, '省')
      this.province.forEach(item => {
        if (this.provinces === item.id) {
          this.prove = item.name
          console.log(item.name)
        }
      })
      console.log(this.province)
      const city = await this.$axios.get('/api/city_list', {
        params: { token: window.sessionStorage.getItem('token'), pid: e }
      })
      this.city = city.data.data
      // console.log(this.city)
    },
    async cityChange  (e) {
      // console.log(this.citys)
      this.city.forEach(item => {
        if (this.citys === item.id) {
          this.cit = item.name
          console.log(item.name)
        }
      })
      const district = await this.$axios.get(' /api/district_list', {
        params: { token: window.sessionStorage.getItem('token'), pid: e }
      })
      // console.log(district)
      this.district = district.data.data
    },
    // 点击确定消息
    async Addressbtn  () {
      // eslint-disable-next-line camelcase
      this.AdrrForm.consignee_address =
        this.prove + this.cit + this.distr + this.detailed
      this.AdrrForm.token = window.sessionStorage.getItem('token')
      var qs = require('qs')
      const res = await this.$axios.post(
        '/api/shipping_create',
        qs.stringify(this.AdrrForm, { indices: false })
      )
      if (res.status === 200) {
        this.$message.success('添加成功')
        this.addressdialogVisible = false
      }
      // const res = await this.$axios.post('/api/shipping_create', this.AdrrForm)
      console.log(res)
      console.log(this.AdrrForm.consignee_address)
      console.log(5)
    },
    districtchange  (e) {
      console.log(this.districts)
      // console.log(e)
      this.district.forEach(item => {
        if (this.districts === item.id) {
          this.distr = item.name
          console.log(item.name)
        }
      })
    },
    /** 修改按钮操作 */
    handleUpdate  (row) {
      // this.reset()
      console.log(row.id)
      const editId = row.id || this.ids
      // getModel(id).then(response => {
      //   this.form = response.data
      this.open = true
      this.title = '修改订单型号'
      // })
    },
    // 表单重置
    reset () {},
    /** 删除按钮操作 */
    handleDelete  (row) {
      const ids = row.id || this.ids
      this.$confirm(
        '是否确认删除订单型号编号为"' + ids + '"的数据项?',
        ' 警告',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
    },

    // 申请退款显示框操作
    refund  () {
      this.RefdialogVisible = true
    },
    async uploadImg (item) {
      const formData = new FormData()

      formData.append('file', item.file)
      formData.append('token', window.sessionStorage.getItem('token'))
      const res = await this.$axios.post(
        'http://192.168.1.11:8080/api/common/upload',
        { data: formData }
      )
      console.log(res)
    },
    beforeAvatarUpload  (file) {
      this.tkones.token = file
      this.tkones.token = window.sessionStorage.getItem('token')

    },
    //  上传凭证
    async handleRemove  (file, fileList) {
      console.log(55)
      // console.log(file, fileList)
      console.log(file)
      // this.tkones.token = file
      this.tkones.token = window.sessionStorage.getItem('token')
    },
    handlePreview (file) {
      console.log(66)
      console.log(file)
    },
    // 多选框选中数据
    handleSelectionChange (selection) {
      this.ids = selection.map(item => item.editId)
      console.log(this.ids)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    // 确定提交
    async submitForm  () {
      if (this.editId !== undefined) {
        console.log('修改')
      } else {
        console.log('添加')
      }
      var qs = require('qs')
      this.form.token = window.sessionStorage.getItem('token')
      const res = await this.$axios.post('api/order_apply', this.form)
      console.log(res)
    },
    // 取消按钮
    cancel  () {
      this.open = false
      this.reset()
    },
    details (scope) {
      console.log(scope.row)
      const id = scope.row.orderNum
      this.$router.push({ path: '/details', query: { id: id } })
      // this.$router.push('/details')
    },
    /** 导出按钮操作 */
    handleExport  () {
      require.ensure([], () => {
        const { exportJsonToExcel } = require('../../Excel/Export2Excel') // 注意这个Export2Excel路径
        const tHeader = [
          '订单编号',
          '订单状态',
          '付款时间',
          '付款方式',
          '付款金额',
          '付款凭证'
        ] // 上面设置Excel的表格第一行的标题
        const filterVal = [
          'orderId',
          'status',
          'data',
          'mode',
          'amount',
          'voucher'
        ] // 上面的index、nickName、name是tableData里对象的属性key值
        const list = this.tableData // 把要导出的数据tableData存到list
        const data = this.formatJson(filterVal, list)
        exportJsonToExcel(tHeader, data, '列表excel') // 最后一个是表名字
      })
    },
    formatJson  (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    // 分页 监听 显示多少条数据
    handleSizeChange  (newsize) {
      // this.queryParams.pageSize = newsize
      this.queryInfo.pageSize = newsize
      console.log(newsize)
    },
    // 监听 分页显示 多少页码值
    handleCurrentChange (newpage) {
      this.queryParams.pageNum = newpage
      console.log(newpage)
    }
  }
}
</script>

<style lang='less' scoped>
.el-row {
  margin-bottom: 10px;
}
.el-breadcrumb {
  height: 40px;
  line-height: 40px;
  margin-bottom: 10px;
}
.el-pagination {
  margin-top: 10px;
  text-align: right;
}
.el-table {
  text-align: center !important;
}
.el-select {
  width: 100%;
}
.textti {
  font-weight: 900;
  margin: 10px 0;
}
.el-form {
//  display: flex;
// position: relative;
}
.textbtn {
  margin-bottom: 10px;
// position: absolute;
// right: 0;
//  justify-content: flex-end
}
</style>
